<template>
  <div id="detail">

    <h1>{{ msg }}</h1>
    <h2>我是detail组件</h2>

    <h1>标题</h1>
    <h2>{{list.title}}</h2>
    <h1>内容</h1>
    <div v-html="list.content"></div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      msg: "detail组件",
      list: []
    };
  },
  methods: {
    requestData(aid) {
      //get请求如果跨域的话 后台php java 里面要允许跨域请求
      var api =
        "http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=" + aid;

      this.$http.get(api).then(
        response => {
          console.log(response);

          this.list = response.body.result[0];
        },
        err => {
          console.log(err);
        }
      );
    }
  },
  mounted() {
    console.log("detail组件渲染完毕");

    //获取动态路由的传值
    // alert(this.$route.query);
    var aid = this.$route.query.aid;
    this.requestData(aid);
  }
};
</script>

<style lang="scss">
#detail {
  padding: 1rem;

  line-height: 2;

  img {
    max-width: 100%;
  }
}
</style>